<!--
 * @LastEditTime: 2024-09-15 05:25:20
 * @Description: 
 * @Date: 2024-09-15 01:56:43
 * @Author: wangshan
 * @LastEditors: wangshan
-->
<template>
  <el-drawer
    v-model="drawer"
    title="表单设计"
    direction="btt"
    size="100%"
    
    :before-close="handleClose"
  >
  <template #title>
    <div style="width: 100%">
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
  </template>
  <div class="design">
     <v-form-designer ref="formDesign" :banned-widgets="bannedWidgets"  :designer-config="designConfig"></v-form-designer>
     
  </div>
  </el-drawer>
 
</template>
<script setup>
import { ElMessageBox } from 'element-plus'
import { onMounted, watch } from 'vue'
const drawer = ref(false)

const designConfig = ref({
  externalLink: false,
  resetFormJson: false,
  productName: '',
  logoHeader: false,
})
const props = defineProps({
  formJson: {
    type: Object,
    default() {
      return {}
    }
  }
})
const emits = defineEmits(['update:formJson'])

const formDesign = ref(null)

const bannedWidgets = ref(['cascader'])

const open = () => {
 drawer.value = true
}
const close = () => {
 drawer.value = false
}
const getForm =  () => {
   return formDesign.value.getFormJson()
}

const setFormJson = (data ={}) => {
  if(!formDesign.value) return false
  formDesign.value.setFormJson(data)
}

const clearFormJson = () => {
  if(!formDesign.value) return false;
  formDesign.value.clearDesigner()
}

onMounted(() => {
  watch(() => drawer.value, (n) => {
    clearFormJson()
    nextTick(() => {
      setFormJson(props.formJson)
    })
  })
})

const handleClose = (done) => { 
  ElMessageBox.confirm('是否确认关闭?')
    .then(() => {
      done()
    })
    .catch(() => {
      console.log('====================================');
      console.log(getForm());
      console.log('====================================');
      // catch error
    })
}

const handleSave = () => {
  emits('update:formJson', getForm())
  drawer.value = false
}

defineExpose({
  open,
  close,
  getForm
})
</script>
<style>
.design .main-container {
  margin-left: 0 !important;
  height: 100%;
}
.design .main-title {
  display: none !important;
}
.design {
  /* height: 100%;
  overflow: scroll; */
  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>